<template>
    <div class="home-container">
        <div id="slider" class="mui-slider" data-slider="1">
            <div class="mui-slider-group mui-slider-loop" style="transform: translate3d(-1501px, 0px, 0px) translateZ(0px);">
                <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img src="../../images/cbd.jpg">
                    </a>
                </div>
                <!-- 第一张 -->
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="../../images/muwu.jpg">
                    </a>
                </div>
                <!-- 第二张 -->
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="../../images/shuijiao.jpg">
                    </a>
                </div>
                <!-- 第三张 -->
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="../../images/yuantiao.jpg">
                    </a>
                </div>
                <!-- 第四张 -->
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="../../images/cbd.jpg">
                    </a>
                </div>
                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img src="../../images/cbd.jpg">
                    </a>
                </div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>
        <div class="nav-link mui-clearfix">
            <a>
                <img src="../../images/nav1.png">
            </a>
            <a>
                <img src="../../images/nav2.png">
            </a>
            <a>
                <img src="../../images/nav3.png">
            </a>
            <a>
                <img src="../../images/nav4.png">
            </a>
            <a>
                <img src="../../images/nav5.png">
            </a>
            <a>
                <img src="../../images/nav6.png">
            </a>
        </div>
        <div class="brand-container mui-clearfix">
            <img src="../../images/title0.png">
            <ul>
                <li><a href="#"><img src="../../images/brand1.png" alt="">
                </a></li>
                <li><a href="#"><img src="../../images/brand2.png" alt=""></a></li>
                <li><a href="#"><img src="../../images/brand3.png" alt=""></a></li>
                <li><a href="#"><img src="../../images/brand4.png" alt=""></a></li>
                <li><a href="#"><img src="../../images/brand5.png" alt=""></a></li>
                <li><a href="#"><img src="../../images/brand6.png" alt=""></a></li>
                <li><a href="#"><img src="../../images/brand7.png" alt=""></a></li>
                <li><a href="#"><img src="../../images/brand8.png" alt=""></a></li>
            </ul>
        </div>
        <div class="product-container mui-clearfix">
            <img src="../../images/title1.png">
            <ul>
                <li><a href="">
                    <img src="../../images/product.jpg">
                    <h1>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </h1>
                    <p><span class="now-price">￥899</span><span class="old-price">￥599</span></p>
                    <button type="button" class="mui-btn mui-btn-primary">点击购买</button>
                </a></li>
                <li><a href="">
                    <img src="../../images/product.jpg">
                    <h1>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</h1>
                    <p><span class="now-price">￥899</span><span class="old-price">￥599</span></p>
                    <button type="button" class="mui-btn mui-btn-primary">点击购买</button>
                </a></li>
                <li><a href="">
                    <img src="../../images/product.jpg">
                    <h1>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</h1>
                    <p><span class="now-price">￥899</span><span class="old-price">￥599</span></p>
                    <button type="button" class="mui-btn mui-btn-primary">点击购买</button>
                </a></li>
                <li><a href="">
                    <img src="../../images/product.jpg">
                    <h1>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</h1>
                    <p><span class="now-price">￥899</span><span class="old-price">￥599</span></p>
                    <button type="button" class="mui-btn mui-btn-primary">点击购买</button>
                </a></li>
            </ul>
        </div>
        <div class="product-container mui-clearfix">
            <img src="../../images/title2.png">
            <ul>
                <li><a href="">
                    <img src="../../images/product.jpg">
                    <h1>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </h1>
                    <p><span class="now-price">￥899</span><span class="old-price">￥599</span></p>
                    <button type="button" class="mui-btn mui-btn-primary">点击购买</button>
                </a></li>
                <li><a href="">
                    <img src="../../images/product.jpg">
                    <h1>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</h1>
                    <p><span class="now-price">￥899</span><span class="old-price">￥599</span></p>
                    <button type="button" class="mui-btn mui-btn-primary">点击购买</button>
                </a></li>
                <li><a href="">
                    <img src="../../images/product.jpg">
                    <h1>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</h1>
                    <p><span class="now-price">￥899</span><span class="old-price">￥599</span></p>
                    <button type="button" class="mui-btn mui-btn-primary">点击购买</button>
                </a></li>
                <li><a href="">
                    <img src="../../images/product.jpg">
                    <h1>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</h1>
                    <p><span class="now-price">￥899</span><span class="old-price">￥599</span></p>
                    <button type="button" class="mui-btn mui-btn-primary">点击购买</button>
                </a></li>
            </ul>
        </div>
        <div class="product-container mui-clearfix">
            <img src="../../images/title3.png">
            <ul>
                <li><a href="">
                    <img src="../../images/product.jpg">
                    <h1>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </h1>
                    <p><span class="now-price">￥899</span><span class="old-price">￥599</span></p>
                    <button type="button" class="mui-btn mui-btn-primary">点击购买</button>
                </a></li>
                <li><a href="">
                    <img src="../../images/product.jpg">
                    <h1>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</h1>
                    <p><span class="now-price">￥899</span><span class="old-price">￥599</span></p>
                    <button type="button" class="mui-btn mui-btn-primary">点击购买</button>
                </a></li>
                <li><a href="">
                    <img src="../../images/product.jpg">
                    <h1>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</h1>
                    <p><span class="now-price">￥899</span><span class="old-price">￥599</span></p>
                    <button type="button" class="mui-btn mui-btn-primary">点击购买</button>
                </a></li>
                <li><a href="">
                    <img src="../../images/product.jpg">
                    <h1>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</h1>
                    <p><span class="now-price">￥899</span><span class="old-price">￥599</span></p>
                    <button type="button" class="mui-btn mui-btn-primary">点击购买</button>
                </a></li>
            </ul>
        </div>
    </div>
</template>

<script>
    import mui from '../../lib/dist/js/mui.js'
    export default {
        data(){
            return{

            }
        },
        updated() {
            var sliderMuiObj = mui("#slider");
            sliderMuiObj.slider({
                interval: 3000
            });
        }
    }
</script>

<style scoped lang="css">

    #slider{
        height: 200px;
    }
    .nav-link{
        padding: 10px;
        width: 100%;
    }
    .nav-link a{
        width: 33.333%;
        display: block;
        float: left;
    }
    .nav-link a img{
        width: 100%;
    }
    .brand-container{
        padding: 0px 10px;
    }
    .brand-container img{
        width: 100%;
    }
    .brand-container a{
        display: block;
    }
    .brand-container ul{
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 10px 0;
    }
    .brand-container ul li{
        width: 25%;
        float: left;
    }
    .brand-container ul li img{
        width: 100%;
    }
    .product-container{
        padding: 0 10px;
    }
    .product-container img{
        width: 100%;
        padding: 10px 5px;
    }
    .product-container ul{
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .product-container ul li a{
        display: block;
        border: solid 1px #DDDDDD;
        padding: 5px;
        min-height: 200px;
        box-shadow: 0 0 3px #ddd;
    }
    .product-container ul li{
        width: 50%;
        float: left;
        list-style: none;
        padding: 5px;

    }
    .product-container ul li a h1{
        font-size: 14px;
        text-align: center;
        color: #0f0f0f;
    }
    .product-container ul li a p{
        text-align: center;
    }
    .product-container ul li a p .now-price{
        font-size: 13px;
        font-weight: bold;
        color: red;
        margin-right:3px ;
    }
    .product-container ul li a p .old-price{
        font-size: 13px;
        text-decoration: line-through;
    }
    .product-container ul li a button{
        display:block;
        margin:0 auto
    }
</style>